<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
</ul>
<button id="test">test</button>
<div id="content">aaaaaaa</div>

<script> /* script宏任务 => 它不进入宏队列  */

  setTimeout(() => {// 宏任务
    alert('timeout1')  // 页面渲染了吗?
  }, 0)

  Promise.resolve().then(() => { // 微任务
    alert('promise1') // 页面渲染了吗?
  }) 
  Promise.resolve().then(() => { // 微任务
    alert('promise2') // 页面渲染了吗?
  }) 

  document.getElementById('test').onclick = () => { // 宏任务

    document.getElementById('content').innerHTML = 'xxxx'  // 更新DOM

    setTimeout(() => { // 宏任务  
      document.getElementById('content').innerHTML = 'zzzz'
      alert('timout2') // 页面更新渲染了吗?
    }, 0)

    Promise.resolve().then(() => { // 微任务
      document.getElementById('content').innerHTML = 'yyyy'
      alert('promise3') // 页面更新渲染了吗?
    }) 
    alert('click')
  }
  
  alert('1111') // 页面渲染了吗?  
</script>
</body>
</html>